﻿
.formtitle {
    border-bottom: solid 1px #d0dee5;
    line-height: 35px;
    position: relative;
    height: 35px;
    margin-bottom: 20px;
}

    .formtitle span {
        font-weight: bold;
        font-size: 16px;
        border-bottom: solid 3px #66c9f3;
        float: left;
        position: absolute;
        z-index: 100;
        bottom: -1px;
        padding: 0 3px;
        height: 30px;
        line-height: 30px;
    }

/* Float Shadow */
.float-shadow {
    display: inline-block;
    position: relative;
    -webkit-transition-duration: 0.3s;
    transition-duration: 0.3s;
    -webkit-transition-property: transform;
    transition-property: transform;
    -webkit-transform: translateZ(0);
    transform: translateZ(0);
    box-shadow: 0 0 1px rgba(0, 0, 0, 0);
}

    .float-shadow:before {
        pointer-events: none;
        position: absolute;
        z-index: -1;
        content: '';
        top: 100%;
        left: 5%;
        height: 10px;
        width: 90%;
        opacity: 0;
        background: radial-gradient(ellipse at center, rgba(0, 0, 0, 0.35) 0%, rgba(0, 0, 0, 0) 80%);
        /* W3C */
        -webkit-transition-duration: 0.3s;
        transition-duration: 0.3s;
        -webkit-transition-property: transform, opacity;
        transition-property: transform, opacity;
    }

    .float-shadow:hover, .float-shadow:focus, .float-shadow:active {
        -webkit-transform: translateY(-5px);
        transform: translateY(-5px);
        /* move the element up by 5px */
    }

        .float-shadow:hover:before, .float-shadow:focus:before, .float-shadow:active:before {
            opacity: 1;
            -webkit-transform: translateY(5px);
            transform: translateY(5px);
            /* move the element down by 5px (it will stay in place because it's attached to the element that also moves up 5px) */
        }

.glow {
    display: inline-block;
    -webkit-transition-duration: 0.3s;
    transition-duration: 0.3s;
    -webkit-transition-property: box-shadow;
    transition-property: box-shadow;
    -webkit-transform: translateZ(0);
    transform: translateZ(0);
    box-shadow: 0 0 1px rgba(0, 0, 0, 0);
}

    .glow:hover, .glow:focus, .glow:active {
        box-shadow: 0 0 8px rgba(0, 0, 0, 0.6);
    }



.pCard {
    float: none;
    display: inline-block;
    vertical-align: top;
    border: 1px solid #d7dce1;
    box-shadow: 0 0px 2px #d7dce1;
    background-color: #f9f9f7;
    position: relative;
    -webkit-transition: all .5s ease-in-out;
    -moz-transition: all .2s ease-in-out;
    transition: all .2s ease-in-out;
    min-width: 130px;
    margin: 9px 6px 9px 9px;
    border-radius: 4px;
}

.pHead {
    margin: 4px;
    border-radius: 3px;
    float: left;
    height: 45px;
    width: 45px;
}

.pCard .pName {
    min-height: 14px;
    max-width: 109px;
}

.pName {
    padding: 8px 0 0 0;
    position: relative;
    display: inline-block;
    font-weight: normal;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    font-size: 14px;
}

.pCard:hover {
    border-color: #66c9f3;
    box-shadow: 0 0px 10px #66c9f3;
    cursor: pointer;
}

.pCardSelect {
    border-color: #66c9f3;
    box-shadow: 0 0px 10px #66c9f3;
    cursor: pointer;
}

.pStatus {
    color: #1288c5;
    font-size: 12px;
}

.notification {
    position: absolute;
    top: -12px;
    right: -12px;
    line-height: 14px;
    height: 20px;
    padding: 2px 8px;
    color: white !important;
    text-shadow: 0 1px rgba(0,0,0,0.25);
    border-width: 1px;
    border-style: solid;
    border-radius: 10px;
    -webkit-border-radius: 50em;
    -moz-border-radius: 50em;
    border-radius: 50em;
    -webkit-box-shadow: 0 1px 1px rgba(0,0,0,0.08),inset 0 1px rgba(255,255,255,0.3);
    -moz-box-shadow: 0 1px 1px rgba(0,0,0,0.08),inset 0 1px rgba(255,255,255,0.3);
    box-shadow: 0 1px 1px rgba(0,0,0,0.08),inset 0 1px rgba(255,255,255,0.3);
}

.red {
    background-color: #fa603d;
    background: #fa603d;
    background: -webkit-gradient(linear,left top,left bottom,from(#fc9d88),to(#fa603d));
    background: -webkit-linear-gradient(top,#fc9d88,#fa603d);
}

.green {
    border-color: #5aad34;
    background-color: #78cd51;
    background: #78cd51;
    background: -webkit-gradient(linear,left top,left bottom,from(#a6dd8d),to(#78cd51));
    background: -webkit-linear-gradient(top,#a6dd8d,#78cd51);
    background: -moz-linear-gradient(top,#a6dd8d,#78cd51);
    background: -o-linear-gradient(top,#a6dd8d,#78cd51);
    background: -ms-linear-gradient(top,#a6dd8d,#78cd51);
    background: linear-gradient(top,#a6dd8d,#78cd51);
}

.blue {
    border-color: #2fabe9;
    background-color: #67c2ef;
    background: #67c2ef;
    background: -webkit-gradient(linear,left top,left bottom,from(#acddf6),to(#67c2ef));
    background: -webkit-linear-gradient(top,#acddf6,#67c2ef);
    background: -moz-linear-gradient(top,#acddf6,#67c2ef);
    background: -o-linear-gradient(top,#acddf6,#67c2ef);
    background: -ms-linear-gradient(top,#acddf6,#67c2ef);
    background: linear-gradient(top,#acddf6,#67c2ef);
}




.chat-widget ul {
    list-style-type: none;
    margin: 0px;
    padding: 0px;
}

.chat-widget li {
    margin-bottom: 15px;
}

.chat-widget img {
    border-radius: 100px;
    background: #fff;
    width: 60PX;
    height: 60PX;
}

.chat-widget .chat-meta {
    font-size: 14px;
    margin-bottom: 5px;
    font-weight: bolder;
}

.chat-widget .by-me .chat-content {
    background: #fcfcfc;
    margin-left: 70px;
    position: relative;
    border: 1px solid #ddd;
    padding: 5px 10px;
    border-radius: 5px;
    font-size: 14px;
    line-height: 20px;
    color: #777;
}

    .chat-widget .by-me .chat-content:after, .chat-widget .by-me .chat-content:before {
        right: 100%;
        border: solid transparent;
        content: " ";
        height: 0;
        width: 0;
        position: absolute;
        pointer-events: none;
    }

    .chat-widget .by-me .chat-content:after {
        border-color: rgba(255, 255, 255, 0);
        border-right-color: #fff;
        border-width: 6px;
        top: 30%;
        margin-top: -10px;
    }

    .chat-widget .by-me .chat-content:before {
        border-color: rgba(238, 238, 238, 0);
        border-right-color: #ccc;
        border-width: 7px;
        top: 30%;
        margin-top: -11px;
    }

.chat-widget .by-other .chat-content {
    background: #fcfcfc;
    margin-right: 70px;
    position: relative;
    border: 1px solid #ddd;
    padding: 5px 10px;
    border-radius: 5px;
    font-size: 14px;
    line-height: 20px;
    color: #777;
}

    .chat-widget .by-other .chat-content:after, .chat-widget .by-other .chat-content:before {
        left: 100%;
        border: solid transparent;
        content: " ";
        height: 0;
        width: 0;
        position: absolute;
        pointer-events: none;
    }

    .chat-widget .by-other .chat-content:after {
        border-color: rgba(255, 255, 255, 0);
        border-left-color: #fff;
        border-width: 6px;
        top: 30%;
        margin-top: -6px;
    }

    .chat-widget .by-other .chat-content:before {
        border-color: rgba(204, 204, 204, 0);
        border-left-color: #ccc;
        border-width: 7px;
        top: 30%;
        margin-top: -7px;
    }

.chat-widget .form-group {
    width: 80% !important;
}

.avatar {
    -webkit-box-shadow: inset 0 -1px 0 #3333sf;
    -webkit-transition: 0.4s;
    -webkit-transition: -webkit-transform 0.4s ease-out;
    transition: transform 0.4s ease-out; /*变化时间设置为0.4秒(变化动作即为下面的图像旋转360度）*/
    -moz-transition: -moz-transform 0.4s ease-out;
}

    .avatar:hover { /*设置鼠标悬浮在头像时的CSS样式*/
        box-shadow: 0 0 10px #fff;
        -webkit-box-shadow: 0 0 10px #fff;
        transform: rotateZ(360deg); /*图像旋转360度*/
        -webkit-transform: rotateZ(360deg);
        -moz-transform: rotateZ(360deg);
    }



.ms-controller, [ms-controller] {
    display: none;
}

.bodythem1 {
    background-color: #EEE;
}

.bodythem2 {
    background-image: url(../../images/ProJectManger/wood.png);
    background-repeat: repeat;
}

.bodythem5 {
    background-image: url(../../images/ProJectManger/BG5.png);
    background-repeat: repeat;
}

.bodythem6 {
    background-image: url(../../images/ProJectManger/BG6.jpg);
    background-repeat: repeat;
}

.bodythem7 {
    background-image: url(../../images/ProJectManger/ocean.jpg);
    background-repeat: repeat;
}
